<template>
  <div id="FloorManage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <el-form class="form" :inline="true" ref="form" :model="formData">
          <!-- <el-form-item label="总控编号" required prop="name">
                        <el-input v-model.trim="formData.name" placeholder="请输入"></el-input>
                    </el-form-item> -->
          <el-form-item label="楼栋" required prop="name">
            <el-select v-model="region" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼层" required prop="name">
            <el-select v-model="layer" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间号" required prop="name">
            <el-select v-model="layer" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form>
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>

    <h1 class="main-title">统计</h1>

    <div class="wrapper main-card">
      <div>
        <el-table :data="hotspendrecordtotal" style="width: 100%">
          <el-table-column prop="buildingId" label="楼栋"></el-table-column>
          <!-- <el-table-column prop="master_id" label="总控编号"> </el-table-column> -->
          <!--  <el-table-column prop="region" label="楼栋"> -->
          <!-- <template slot-scope="scope">
              {{ scope.row.buildNumber.name }}
              {{ scope.row.buildNumber.region }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="floorNumber.layer"
            label="楼层"
          ></el-table-column> -->
          <el-table-column prop="spendMoney" label="已用金额"></el-table-column>
          <el-table-column
            prop="spendNumber"
            label="已用水量(吨)"
          ></el-table-column>
          <!-- <el-table-column prop="data" label="用表日期"></el-table-column> -->
        </el-table>
      </div>
    </div>

    <h1 class="main-title">明细</h1>
    <div class="wrapper main-card">
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="SS_MC" label="房间号"> </el-table-column>
          <el-table-column prop="meterNumber" label="水表编号">
          </el-table-column>
          <el-table-column prop="spendMoney" label="已用金额"></el-table-column>
          <el-table-column
            prop="spendNumber"
            label="已用水量(吨)"
          ></el-table-column>
          <!-- <el-table-column
            property="depositMoney"
            label="存款余额(元)"
          ></el-table-column>
          <el-table-column
            property="subsidyMoney"
            label="补助余额(元)"
          ></el-table-column> -->
          <!-- <el-table-column
            property="meterRead"
            label="电表读数(度)"
          ></el-table-column> -->
          <!-- <el-table-column
            property="lastRead"
            label="上次电表读数(度)"
          ></el-table-column> -->
          <!-- <el-table-column label="电器状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleSwitchChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column> -->
          <!-- <el-table-column property="power" label="使用功率"></el-table-column> -->
          <el-table-column
            property="updatedAt"
            label="用表日期"
          ></el-table-column>
          <!-- <el-table-column
            property="master_id"
            label="主控编号"
          ></el-table-column> -->
          <!-- <el-table-column property="control" label="从控编号"></el-table-column> -->
          <!-- <el-table-column
            property="limitPower"
            label="限制功率"
          ></el-table-column> -->
          <el-table-column property="button" label="操作">
            <template slot-scope="scope">
              <el-button @click="modify(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { userhotwatermeterreport } from '@/api/recharge'
import { getmeterread } from '@/api/meterread'

export default {
  components: {},
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      region: '',
      layer: '',
      formData: {},
      tableData: [{}],
      currentItem: {},
      hotspendrecordtotal: {}
    }
  },
  mounted() {
    // this.fetchData()
    this.userhotwatermeterreport()
  },
  methods: {
    // 获取服务器数据
    userhotwatermeterreport() {
      userhotwatermeterreport()
        .then(res => {
          console.log(111111)
          console.log(res.data)
          this.tableData = res.data.hotspendrecord
          this.hotspendrecordtotal = res.data.hotspendrecordtotal
          this.total = res.spendrecord.length // 设置总数据量
          // this.pageData = this.queryByPage() // 初始化分页数据
        })
        .catch(err => {
          console.log(err)
        })
    }
    // fetchData() {
    //   // 数据接口
    //   // getmeterread().then(res => {
    //   //   console.log(res)
    //   //   this.tableData = res.data.meterreads
    //   //   // this.tableData.buildName = res.data.meterreads.buildNumber[0].name; // 添加新的字段 buildName
    //   //   // console.log(this.tableData)

    //   //   // this.tableData.buildNumber.name
    //   //   // this.pageData = res.data.master
    //   //   // this.total = res.data.master.length
    //   // })

    // }
  },
  handleSubmitClick() {}
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
